<template>
  <div class="table-tool-bar">
    <div class="left">
      <el-button v-if="create" type="primary" icon="el-icon-plus" plain @click="handleCreate">新增</el-button>
      <el-button v-if="remove" type="danger" icon="el-icon-delete" plain @click="handleRemove">删除</el-button>
      <slot />
    </div>
    <div class="right flex-row">

      <slot name="rightTool" />
      <el-tooltip v-if="refresh" class="item" effect="dark" content="刷新" placement="top">
        <el-button circle icon="el-icon-refresh" @click="handleRefresh()" />
      </el-tooltip>
      <el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '收起搜索' : '展开搜索'" placement="top">
        <el-button circle icon="el-icon-search" @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip v-if="columns.length>0" class="item" effect="dark" content="显隐列" placement="top">
        <el-button circle icon="el-icon-menu" @click="showColumn()" />
      </el-tooltip>

    </div>
    <model-dialog :title="title" :visible.sync="open" @close="open=!open">
      <el-transfer
        v-model="value"
        :titles="['显示', '隐藏']"
        :data="columns"
        @change="dataChange" />
    </model-dialog>

  </div>
</template>
<script>
export default {
  name: 'TableToolbar',
  props: {
    // 是否显示新增
    create: {
      type: Boolean,
      default: true
    },
    // 是否显示删除
    remove: {
      type: Boolean,
      default: true
    },
    // 是否显示刷新
    refresh: {
      type: Boolean,
      default: true
    },

    showSearch: {
      type: Boolean,
      default: true
    },
    search: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: '显示/隐藏',
      // 是否显示弹出层
      open: false
    }
  },

  methods: {
    // 搜索
    toggleSearch() {
      this.$emit('update:showSearch', !this.showSearch)
    },
    // 刷新
    handleRefresh() {
      this.$emit('refresh')
    },
    // 新增
    handleCreate() {
      this.$emit('create')
    },
    // 删除
    handleRemove() {
      this.$emit('remove')
    },
    // 右侧列表元素变化
    dataChange(data) {
      for (var item in this.columns) {
        const key = this.columns[item].key
        this.columns[item].visible = !data.includes(key)
      }
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
.table-tool-bar {
  display: flex;
  .left{
      flex: 1;
  }
  .right{
    //width: 200px;
    text-align: right;
    .el-button{
      margin-left: 10px;
    }
  }
}
</style>
